<template>
  <div class="layout-padding row justify-center">
    <q-card inline style="width: 600px; max-width: 100vw;">
      
      <q-card-separator  style="height:3px"/>
      <div style="background-color:antiquewhite">
          <q-item>
            <q-item-side :avatar="(reply.replySrcuser.logoRes || 'statics/hg-logo-head.png') | avatarView" 
              @click="$router.push('/personal/personal-home?customerId='+reply.replySrcuser.id)"/>
            <q-item-main>
              <q-item-tile label>{{reply.replySrcuser.name}}</q-item-tile>
              <q-item-tile sublabel>{{reply.createdDate | formatDateToTime}}</q-item-tile>
            </q-item-main>
            <q-item-side>
                <q-btn flat round small :color="reply.liked ? 'teal': ''" @click="likedReplyAction(reply)" icon="thumb_up">
                  {{reply.likedcount | convertNum}}
                </q-btn>
            </q-item-side>
          </q-item>
          <q-item><q-item-main>{{reply.content}}</q-item-main></q-item>
      </div>
      <reply-list-compo ref="replyReplyList" :replyTarid="replyId"></reply-list-compo>
      <!-- 回复 -->
      <content-edit-compo ref="replyEdit" v-on:commit-result="handlerReply" :enablePicChoice="false" :isAddIcon="false"></content-edit-compo>
    </q-card>
  </div>
</template>

<script>
import {
  QCard,
  QCardSeparator,
  QCardMain,
  QItem,
  QItemMain,
  QItemSide,
  QItemTile,
  QBtn,
  QIcon,
  Alert
} from "quasar";
import commonCompo from "../common-compo";
import replyListCompo from "./reply-list-compo";
import contentEditCompo from "../content-edit-compo";
import replyApi from "../../../https/replyApi";
export default {
  components: {
    contentEditCompo,
    replyListCompo,
    commonCompo,
    QCard,
    QCardSeparator,
    QCardMain,
    QItem,
    QItemMain,
    QItemSide,
    QItemTile,
    QBtn,
    QIcon,
    Alert
  },
  // mixins: [replyListCompo],
  data() {
    return {
      replyId: new Number(this.$route.query.replyId),
      reply: { replySrcuser: {} }
    };
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      if (this.replyId) {
        replyApi
          .get(this.replyId)
          .then(res => {
            const { status, data } = res;
            if (status == 200 && data) {
              this.reply = data;
            }
          })
          .catch(err => {});
      }
      // this.reply = {
      //   id:1230,
      //   replySrcuser: {
      //     id:12,
      //     logoRes: "statics/boy-avatar.png",
      //     name: "陈赫"
      //   },
      //   createdDate: Date.now(),
      //   liked: true,
      //   likedcount: 1700,
      //   replycount: 1100,
      //   allowDel: true,
      //   content: "we are family!!!"
      // };
    },
    alertMsg(msg) {
      if (msg) {
        const _errAlert = Alert.create({
          color: 'warning',
          icon: 'info',
          html: msg,
          position: 'bottom',
        });
         setTimeout(()=>{
          _errAlert.dismiss();
        },3000);
      }
    },
    likedReplyAction(reply) {
      //是否是主题
      const _liked = reply.liked;
      //处理点赞
      if (_liked) {
        this.alertMsg('您已经赞过了')
        // reply.liked = false;
        // reply.likedcount--;
        // replyApi
        //   .likedCancel(reply.id)
        //   .then(res => {
        //     console.log("取消点赞回复");
        //   })
        //   .catch(err => {});
      } else {
        reply.liked = true;
        reply.likedcount++;
        replyApi
          .liked(reply.id)
          .then(res => {
            console.log("点赞帖子");
          })
          .catch(err => {});
      }
      console.log("处理点赞：", reply.likedcount);
    },
    handlerReply(commitResult) {
      const params = {
        topic: false,
        replyTarid: this.replyId,
        replyTaruser: this.reply.replySrcuser,
        content: commitResult.content
      };
      console.log("回复评论：", params);
      replyApi
        .add(params)
        .then(res => {
          if (res.status == 200) {
              this.$refs.replyReplyList.clearDatas();
              this.$refs.replyReplyList.loadData();
              this.$refs.replyEdit.clearDatas();
          }
        })
        .catch(err => {});
    }
  }
};
</script>
